* {
    margin: 0;
    padding: 0;

}

a {
    text-decoration: none;
}

body,
html {
    background: #f6f7fa;
    // box-sizing: border-box;
    width: 100%;
}

.header-container {
    width: 100%;
    background: rgb(51, 51, 51);
    min-height: 82px;
}

.nav-main {
    width: 1200px;
    height: 82px;
    margin: 0px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .logo {
        width: 183px;
        height: 28px;
        margin: 0px 72px 0px 0px;
        background: url('../images/logo.png') center center / cover no-repeat;
        cursor: pointer;
    }

    .nav-warp {
        flex: 1;
        position: relative;

        .nav-list {
            display: flex;
            align-items: center;
            justify-content: flex-start;

            a {
                align-items: center;
                color: #cccccc;
                cursor: pointer;
                display: flex;
                font-size: 18px;
                height: 82px;
                justify-content: center;
                padding: 0 22px;
                z-index: 10;
                color: #ccc;
            }

            a:hover {
                color: #fff;
                background-color: green;
            }
        }
    }

    .search-wrap {
        position: relative;
        z-index: 999;

        .nav-search {
            position: relative;
            align-items: center;
            display: flex;
            justify-content: flex-start;

            .search-input {
                background: transparent;
                border: 1px solid rgba(241, 64, 43, 0.5);
                box-sizing: border-box;
                color: #cccccc;
                font-size: 14px;
                height: 32px;
                padding: 0 12px;
                width: 234px;
            }

            .search-btn {
                cursor: pointer;
                align-items: center;
                background: rgba(241, 64, 43, 0.5) center center / 16px 16px no-repeat url();
                box-sizing: border-box;
                display: flex;
                height: 32px;
                justify-content: center;
                position: relative;
                width: 40px;

                a {
                    height: 100%;
                    left: 0;
                    opacity: 0;
                    position: absolute;
                    top: 0;
                    width: 100%;
                }
            }
        }
    }
}

.info-wrap {
    width: 93px;
    height: 26px;
    align-items: center;
    color: #cccccc;
    display: flex;
    font-size: 14px;
    line-height: 16px;
    margin-left: 33px;
    position: relative;

    .zhun {
        position: relative;
        height: 26px;
        width: 26px;

        overflow: hidden;

        img {
            left: -52px;
            position: absolute;
            height: 100%;
        }

        &:hover img {
            left: -78px;
        }
    }

    .person {
        position: relative;
        height: 26px;
        width: 26px;
        overflow: hidden;

        img {
            left: 0px;
            position: absolute;
            height: 100%;
        }

        &:hover img {
            left: -26px;
        }
    }

    .divide {
        background-color: #cccccc;
        display: inline-block;
        height: 12px;
        margin: 0 20px;
        width: 1px;
    }
}

.footer-container {
    z-index: 10;
    position: relative;
    min-width: 1200px;
    max-width: 1920px;
    height: 120px;
    box-sizing: border-box;
    padding: 40px 0px;
    background: rgb(51, 51, 51);

    .footer-font {
        margin: 0px auto 16px;
        text-align: center;
        line-height: 12px;
        white-space: nowrap;

        .link-tab-hover{
            font-size: 12px;
            color: rgb(198, 198, 202);
            line-height: 12px;
            &:hover{
                text-decoration: underline;
            }
        }
       .gap{
        font-size: 12px;
        color: rgb(198, 198, 202);
        line-height: 12px;
        margin-left: 15px;
        &:hover{
            text-decoration: underline; 
        }
       }
       .item{
        font-size: 12px;
        color: rgb(198, 198, 202);
        line-height: 12px;
        margin-left: 15px;
       
       }
    }
    .footer-font-bottom{
        margin: 0px auto;
        text-align: center;
        line-height: 12px;
        white-space: nowrap;
        .item{
            font-size: 12px;
            color: rgb(198, 198, 202);
            line-height: 12px;
            &:hover{
                text-decoration: underline;
            }
            &:last-child:hover{
                text-decoration: none;
               }
           }
            
           .divide-2{
            display: inline-block;
            width: 1px;
            height: 10px;
            margin: 0px 5px;
            background: rgb(198, 198, 202);
           }
        
    }
}
.search-info{
    background-color: #333;
   display: none;
    top: 30px;
    position: absolute;
    height:200px;
    width: 274px;
    
}
.search-info li{
    line-height: 20px;
    list-style: none;
    font-size: 14px;
    color: #fff;
    overflow: hidden;
}